<template>
  <!-- 头部 -->
  <div class="box">
    <div class="top">
      商品搜索:
      <input
        class="top-input"
        v-model="ruleForm.skuName"
        placeholder="请输入内容"
        style="width: 250px; height: 40px; margin: 10px"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        style="height: 40px"
        @click="searchFn"
        >搜索</el-button
      >
    </div>
    <!-- main主体 -->
    <div class="bottom">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
        class="main-input"
        @click="addFn"
        >新建</el-button
      >
      <!-- 对话框 -->
      <el-dialog :title="title" :visible.sync="dialogFlag" width="60%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="130px"
          class="demo-ruleForm"
        >
          <!-- 1 -->
          <el-form-item label="商品名称" prop="skuName">
            <el-input
              v-model="ruleForm.skuName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <!-- 2 -->
          <el-form-item label="品牌" prop="brandName">
            <el-input
              v-model="ruleForm.brandName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <!-- 3 -->
          <el-form-item label="商品价格（元）" prop="price">
            <el-input
              v-model.number="ruleForm.price"
              type="number"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <!-- 4 -->
          <el-form-item label="商品类型" prop="className">
            <el-select v-model="ruleForm.classId" placeholder="请选择活动区域">
              <el-option
                :label="item.className"
                :value="item.classId"
                v-for="(item, index) in classNameArr"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 5 -->
          <el-form-item label="规格" prop="unit">
            <el-input v-model="ruleForm.unit" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- 6 -->
          <el-form-item>
            <el-upload
              class="avatar-uploader"
              action="http://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"
              name="fileName"
              :show-file-list="false"
              :on-success="uploadSuccessFn"
              :before-upload="uploadBeforeFn"
            >
              <!-- :http-request="uploadFile" -->
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">
                只能上传jpeg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFlag = false">取 消</el-button>
          <el-button type="primary" @click="submitFn">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 导入按钮 ----------------------------------->
      <el-button style="background: #f1e7e2; height: 40px" @click="flag = !flag"
        >导入数据</el-button
      >
      <!-- dialog数据导入 -->
      <el-dialog title="数据导入" :visible.sync="flag" width="40%">
        <div>
          <el-form>
            <el-form-item label="标题：">
              <template>
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple
                  :limit="3"
                >
                  <el-button size="small" type="primary" style="width: 200px"
                    >点击上传</el-button
                  >
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
              </template>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- table -->
    <el-table stripe style="width: 100%" :data="tableData">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="商品名称" prop="skuName"></el-table-column>
      <el-table-column label="商品图片"
        ><template #default="scope"
          ><img
            :src="scope.row.skuImage"
            alt=""
            style="height: 40px" /></template
      ></el-table-column>
      <el-table-column label="品牌" prop="brandName"></el-table-column>
      <el-table-column label="规格" prop="unit"></el-table-column>
      <el-table-column label="商品价格" prop="price"></el-table-column>
      <el-table-column
        label="商品类型"
        prop="skuClass.className"
      ></el-table-column>
      <el-table-column label="创建日期" prop="createTime"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-link @click="editFn(scope)">修改</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- bottom -->
    <div class="bottom">
      <div>
        <span class="span-first">共{{ totalCount }}条记录</span>
        <span>第{{ pageIndex }}/{{ totalPage }}页</span>
      </div>
      <div>
        <el-button class="btn-first" @click="preFn" :disabled="disabledPre"
          >上一页</el-button
        >
        <el-button @click="nextFn" :disabled="disabledNext">下一页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import { getToken } from '@/utils/auth'
import { searchgoods, search, addgoods, editgoods } from '@/api/user'
export default {
  name: 'control-page',
  created() {
    this.random()
    this.searchType()
  },
  data() {
    return {
      flag: false,
      tableData: [],
      ruleForm: {
        skuName: null,
        brandName: null,
        price: null,
        unit: null,
        skuImage: null,
        classId: null
      },
      skuId: null,
      imageUrl: '',
      classNameArr: [],
      rules: {
        skuName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur' }
        ],
        brandName: [
          { required: true, message: '请输入品牌', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 0 到 10 个字符',
            trigger: 'blur'
          }
        ],
        price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
        classId: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入规格', trigger: 'blur' },
          { min: 1, max: 10, message: '请输入1-10个字符', trigger: 'blur' }
        ],
        skuImage: [{ required: true, message: '请上传图片', trigger: 'blur' }]
      },
      title: null,
      dialogFlag: false,

      pageIndex: 1,
      pageSize: 5,
      totalCount: null,
      totalPage: null,
      disabledPre: false,
      disabledNext: false
    }
  },
  methods: {
    uploadSuccessFn(response) {
      this.ruleForm.skuImage = this.imageUrl = response
    },

    async searchType() {
      const res = await search()
      console.log(res)
      this.classNameArr = res.currentPageRecords
    },
    // 点击新建时
    addFn() {
      this.title = '新增商品'
      this.dialogFlag = true
    },
    // 点击搜索
    async random() {
      const res = await searchgoods({
        skuName: this.ruleForm.skuName,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      })
      this.tableData = res.currentPageRecords
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.disabledNext = res.pageIndex === this.totalPage
      this.disabledPre = res.pageIndex === '1'
    },
    // 确定submit
    async submitFn() {
      if (this.title === '修改商品') {
        const res = await editgoods(this.skuId, this.ruleForm)
        this.$message.success('修改成功')
        console.log(res)
        this.random()
      } else {
        await addgoods(this.ruleForm)
        this.random()
        this.$message.success('添加成功')
        this.$refs.ruleForm.resetFields()
        this.imageUrl = ''
      }
      this.dialogFlag = false
    },
    // 修改
    async editFn({ row }) {
      this.dialogFlag = true
      this.title = '修改商品'
      console.log(row)
      this.ruleForm = {
        skuName: row.skuName,
        brandName: row.brandName,
        price: row.price,
        unit: row.unit,
        skuImage: row.skuImage,
        classId: row.classId
      }
      this.skuId = row.skuId
      this.imageUrl = row.skuImage
    },
    // 搜索
    searchFn() {
      this.pageIndex = 1
      this.random()
    },
    nextFn() {
      this.pageIndex = +this.pageIndex + 1
      this.random()
    },
    preFn() {
      this.pageIndex = +this.pageIndex - 1
      this.random()
    },
    // 图片格式设置
    uploadBeforeFn(file) {
      console.log(file)
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('图片格式不正确')
        return false
      }
      if (file.size > 500000) {
        this.$message.error('图片要小于500kb')
        return false
      }
      return true
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  background-color: #f4f6fa;
  height: 100vh;
  width: 100%;
  .top {
    height: 64px;
    width: 100%;
    background-color: #fff;
    margin: 25px 0;
    display: flex;
    align-items: center;
    padding: 0 17px;
    .top-input {
      border: 1px solid #f4f6fa;
      text-indent: 1em;
      border-radius: 5px;
      //   &::placeholder {
      //     position: relative;
      //     right: -10px;
      //   }
    }
  }
  .bottom {
    height: 100px;
    width: 100%;
    // padding: 0 15px;
    background-color: #fff;
    padding: 20px 15px 19px 17px;
    display: flex;
    justify-content: space-between;
    .span-first {
      margin-right: 10px;
    }
    .btn-first {
      margin-right: 20px;
      background-color: #d6ddf6;
    }
    .main-input {
      width: 90px;
      height: 40px;
      background: #ee7941;
      color: #fff;
      border: 1px solid #ee7941;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border: 1px dashed #ccc;
    }
  }

  .el-upload img[data-v-544d1f68] {
    width: 80px;
    height: 80px;
  }
}
</style>
